<template>
	<view>
		<TnNavbar fixed bg-color="transparent" text-color="#FFFFFF" home-icon="" back-icon=""
			:safe-area-inset-right="false">
			鸡汤陈列~
		</TnNavbar>
		<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
			<articleItem v-for="item in swiperData" :key="item._id" :obj="item"></articleItem>
			<view class="seat"></view>
		</scroll-view>
		<view class="TnSuspendButton" @click="release">
			<TnIcon name="discover-planet" type="primary" color="#ffffff" size="60rpx" />
		</view>
		<!-- <TnSuspendButton icon="logo-tuniao" /> -->
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getIpName
	} from '@/utils/newip.js'
	import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
	import articleItem from '@/components/articleItem.vue'
	import TnNavbar from '@/uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue'
	const db = uniCloud.database()
	const swiperData = ref([

	])
	getIpName().then(res => {
		console.log(res)
	})

	const getArr = () => {

		const boiking = db.collection("boiking").getTemp()
		const users = db.collection("uni-id-users").field("_id,nickname,avatar_file").getTemp()
		db.collection(boiking, users).orderBy("publish_date", "desc").limit(4).get().then(({
			result: {
				code,
				data
			}
		}) => {
			if (code == 0) {
				swiperData.value = data
			}
		})
	}
	getArr()

	const release = () => {
		uni.redirectTo({
			url: "/newpages/boiling/boiling"
		})
	}
</script>

<style lang="scss" scoped>
	.custom-tabbar-page {
		height: 79.5vh;

		.seat {
			height: 40rpx;
		}
	}

	.TnSuspendButton {
		position: fixed;
		bottom: 300rpx;
		right: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 110rpx;
		height: 110rpx;
		background-image: linear-gradient(0deg, #4481eb 0%, #04befe 100%);
		animation: send 4s ease-in-out infinite;
		border-radius: 50%;
		background-image: repeating-linear-gradient(45deg, #4481eb, #04befe);
		color: #fff;

		&:before {
			content: " ";
			display: block;
			background: inherit;
			-webkit-filter: blur(5px);
			filter: blur(5px);
			position: absolute;
			width: 100%;
			height: 100%;
			top: 5px;
			left: 5px;
			z-index: -1;
			opacity: .4;
			-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
			border-radius: inherit;
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}

	
</style>